<template>
  <div class="endExamContainer">
    <h1>考试结果</h1>
    <div class="result">
      <h2>成绩单</h2>
    <span>总题数：{{stemTotal}}</span>
    <span>正确题目数：{{rightNum}}</span>
    <span>正确率：{{rightNum*100/stemTotal}}%</span>
    <span>总得分：{{rightNum*100/stemTotal}} 分</span>
    </div>

    <div class="showResult">
      <div  v-for="(item,index) in stem"  v-if="index" :key="index">
        <div :style="{'background-color': (isGreen[index-1]?'#9cd5ad':'#E53059')}" @click="showAnalysis(index)">{{index}}</div>
      </div>
    </div>

  <button class="weui-btn weui-btn_mini weui-btn_default exit" @click="backHome">退出</button>
  </div>
</template>

<script>
import HttpKit from '@/utils/http-kit'
import globalStore from "../../stores/global-store";
export default {
  data () {
    return {
      rightNum: 0,
      stemTotal: 0,
      isGreen: [],
      stem: [{}],
      choseIndex: [],
    }
  },

  onLoad: function (option) {
      this.rightNum = option.right;
      this.stemTotal = option.total;
      this.isGreen =  JSON.parse(option.isGreen);
      this.stem = globalStore.state.examingStem;
      console.log(globalStore.state.examingStem)
      this.choseIndex = JSON.parse(option.choseIndex);
      console.log(this.isGreen)
      console.log(this.choseIndex)
  },
  onUnload: function () {
    let info=
      {
        paperId: globalStore.state.paperId,
        paperName: globalStore.state.paperName,
        total: this.stemTotal,
        rightStems: this.rightNum
      }
    globalStore.state.examInfo.push(info)
    console.log(globalStore.state.examInfo)
    //清除数据
    Object.assign(this.$data, this.$options.data())
    //左上方按钮返回主页
    wx.reLaunch({
      url: '/pages/home/main'
    })
  },
  onShow: function() {
    wx.hideHomeButton({
    success: function() {
      console.log("success");
    },
    })
  },

  methods: {
    backHome(){
      wx.switchTab({
        url:"/pages/home/main",
      })
    },

    showAnalysis(index){
    var idx = index-1;
    //选择的题目
      wx.navigateTo({
        url:"/pages/showExamAnalysis/main?choseStemIndex=" + index + "&choseIndex=" + this.choseIndex[idx]
      })
    }
  }
}

</script>

<style scoped >
.endExamContainer {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
}
.endExamContainer h1 {
  margin: 20px auto;
}
.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  padding: 10px 15px;
  border: 1px solid #669999;
  margin-bottom: 20px;
}
.result h2,
span {
  width: 100%;
  border-bottom: 1px solid #669999;
}
.result h2 {
  text-align: center;
}
.showResult {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.showResult div div{
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  margin: 10px 10px;
}
.exit {
  position: absolute;
  width: 150px;
  height: 50px;
  line-height: 50px;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  /*margin-left: -50px;*/
}
.showResult div .changeGreen {
  background-color: #9cd5ad;
}
.showResult div .changeRed {
  background-color: #E53059;
}
</style>
